import React from 'react';
import ReactDOM from 'react-dom';
import './index.scss';

class Item extends React.Component {
	constructor(...args){
        super(...args);
        this.state = {
            name: 1
        }
	}
	render(){
		return (
			<li style={{ color: this.props.color }}>{this.state.name + this.props.num}</li>
		)
	}
}

class Game extends React.Component {
	constructor(props){
		super(props);
		this.state = {
			show: 1,

			value: '',
			date: '',
			h: '',
			m: '',
			s: '',

			arr: [],

			textColor: 'blue',
		};

		setInterval(()=>{
			this.getTime()
		},1000)
	}

	componentDidMount (){
		this.getTime()
	}

	getTime(){
		let _date = new Date();

		this.setState({
			date: _date.getFullYear(),
			h: _date.getHours(),
			m: _date.getMinutes(),
			s: _date.getSeconds(),
		})
	}

	valueChange(ev){
		// console.log(this)
		this.setState({
			value : ev.target.value
		})
	}

	toggle(){
		this.setState({ show: !this.state.show })
	}

	addItem(){
		this.setState({ 
			// textColor: `#${( Math.random().toString(16).substr(-6) )}`,
			arr: this.state.arr.concat(Math.random()) ,
		});
	}

	render() {
		var result = [];
		for(var i=0; i<this.state.arr.length; i++){
			result.push(<Item key={i} num={this.state.arr[i]} />)
			// result.push(<Item key={i} num={this.state.arr[i]} color={ `#${( Math.random().toString(16).substr(-6) )}`} />)
		}

		return (

			<div className="game game2" >
				<h2>12312312</h2>
				<h1>{`${this.state.h} ： ${this.state.m} ： ${(this.state.s < 10 ? '0' : '') +this.state.s } `}</h1>


				<input value={this.state.value} onChange={  this.valueChange.bind(this)  } />
				
				<span>{this.state.value}</span>

				<div><button onClick={ this.toggle.bind(this) }>Toggle</button></div>

				<div><button onClick={ this.addItem.bind(this) }>AddItem</button></div>

				<div className="show" style={{ display: this.state.show ? 'block' : 'none' , color: this.state.textColor }} >123123</div>

				<ul>
					{result}
				</ul>

			</div>
		);
	}
}

// ========================================

ReactDOM.render(
	<Game />,
	document.getElementById('root')
);
